<template>
  <div id="head">
    <!-- 时间日期 -->
    <div class="getDate">
      <span id="time">{{ time }}</span>
      <span id="week">{{ week }}</span>
      <span id="year">{{ year }}</span>
    </div>
    <!-- 天气状况 -->
    <div class="weather">
      <span id="sky">&nbsp;&nbsp;</span>
      <span id="temperatur">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span id="air">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
    <!-- 大标题 -->
    <h1>哈一热安全生产智能管控平台</h1>
  </div>
</template>
<script>
import { dayjs } from 'element-plus'
export default {
  name: 'IsepHeader',
  data() {
    return {
      time: dayjs().format('HH:mm:ss'),
      week: dayjs().format('HH:mm:ss'),
      year: dayjs().format('YYYY-MM-DD')
    }
  },
  mounted() {
    this.getNowTime()
  },
  methods: {
    getNowTime() {
      const self = this
      this.time = dayjs().format('HH:mm:ss')
      this.year = dayjs().format('YYYY-MM-DD')

      let datas = dayjs().day()
      let week = ['日', '一', '二', '三', '四', '五', '六']
      this.week = '星期' + week[datas]
      let speed = 1000
      let theNowTime = function () {
        self.time = dayjs().format('HH:mm:ss')
        self.year = dayjs().format('YYYY-MM-DD')
        datas = dayjs().day()
        self.week = '星期' + week[datas]
      }
      setInterval(theNowTime, speed)
    }
  }
}
</script>
<style lang="scss" scoped>
#head {
  position: relative;
  width: 100%;
  height: 80px;
  background-image: url('@/assets/isep/header.png');
  background-size: 100% 95%;
}
#head .getDate,
.weather {
  font: 18px 黑体;
  color: #adc2ff;
  margin-top: 14px;
}
#head .getDate {
  float: left;
  margin-left: 155px;
}
#head .getDate span {
  margin-right: 35px;
}
#head .weather {
  float: right;
  margin-right: 155px;
}
#head .weather span {
  margin-right: 45px;
}
#head .weather #state {
  display: inline-block;
  height: 24px;
  width: 120px;
  background: #009944;
  font-size: 10px;
  text-align: center;
  color: #fff;
  border-radius: 8px;
  line-height: 24px;
}
#head h1 {
  width: 300;
  height: 80px;
  font-size: 30px;
  line-height: 80px;
  margin: 0 auto;
  font-weight: bold;
  background-image: -webkit-gradient(linear, 0 top, 0 bottom, from(#cae0ff), to(#6eb2ff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}
/*头部head--结束*/
</style>
